<template>
	<view class="content">
		<view class="news">
			<u-swiper
				:list="detailInfo.focusArr"
				height="286rpx"
				circular
				indicator
				:indicatorActiveColor="detailInfo.raceColor || '#0071c5'"
				indicatorMode="dot"
			></u-swiper>
			<view class="news-right">
				<u-icon
					name="map"
					color="#999"
					size="16"
					:label="detailInfo.region"
					labelSize="28rpx"
					labelColor="#999"
				></u-icon>
				<view style="margin-left: 30rpx">
					<u-icon
						name="clock"
						color="#999"
						size="14"
						:label="detailInfo.start"
						labelSize="26rpx"
						labelColor="#999"
					></u-icon>
				</view>
			</view>
		</view>

		<view class="address">
			<text class="address-tlt">活动组别</text>
			<template v-for="(item, index) in groupData">
				<u--text
					:text="item.name"
					bold
					block
					color="#333"
					customStyle="font-size:32rpx"
					margin="24rpx 18rpx 10rpx"
				></u--text>
				<view class="flex-lr-c" :key="item.id">
					<u-cell-group :border="false">
						<u-cell :title="`报名时间：${item.applyEndTime}截止`" :border="false"></u-cell>
						<u-cell :title="`报名费用：${item.money}元/人`" :border="false"></u-cell>
						<!-- 1=无需摇号，2=先付费后摇号，3=先摇号后付费 -->
						<u-cell
							:title="`报名方式：${
								item.competeRule === 1
									? '按支付顺序分配名额'
									: item.competeRule === 2
									? '支付完成后，需要抽签'
									: '先摇号后付费'
							}`"
							:border="false"
						></u-cell>
					</u-cell-group>
					<u-button
						text="报名"
						size="small"
						shape="circle"
						:color="detailInfo.raceColor || '#0071c5'"
						customStyle="width:130rpx"
						@click="onSignHandle(item)"
					></u-button>
				</view>
				<view class="tips" v-if="item.child == 1">
					接受2名20岁以上成年人带领1-2名{{ item.min }}岁以下儿童，或一名20岁以上成年人带领1名{{
						item.min
					}}岁以下儿童，两种方式报名参赛。
				</view>
				<u-line margin="10rpx 0 14rpx" color="#aaa" v-if="index < groupData.length - 1"></u-line>
			</template>
		</view>
		<view class="address">
			<text class="address-tlt" style="margin-bottom: 24rpx">活动介绍</text>
			<u-parse :content="detailInfo.raceInfo"></u-parse>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			id: '',
			detailInfo: {
				is_cancel: '1',
				od_pay_status: '3'
			},
			groupData: []
		}
	},
	onLoad(options) {
		console.log(app.globalData.signInfo.sign)
		this.id = options.id
		this.getDetailInfo()
		this.getGroup()
	},
	methods: {
		// 赛事信息
		getDetailInfo(id) {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/race/race/info/'+this.id,
				data: {}
			},(res) => {
				res.data.focusArr = res.data.focus?JSON.parse(res.data.focus):[]
				this.detailInfo = res.data
			})
			/* prettier-ignore */
		},
		// 赛事组别
		getGroup(id) {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/race/race/group/'+this.id,
				data: {}
			},(res) => {
				this.groupData = res.data
			})
			/* prettier-ignore */
		},
		// 去选手列表页面
		onSignHandle(item) {
			uni.navigateTo({
				url: '/pagesA/sign/signInfo',
				success: (res) => {
					item.cid = this.detailInfo.id
					item.cname = this.detailInfo.name
					item.raceColor = this.detailInfo.raceColor
					item.isFreeTrans = this.detailInfo.isFreeTrans
					// 作废隐藏字段 "hiddenField" 了啊。。。。。。
					//item.hiddenField = this.detailInfo.hiddenField
					// 是否显示紧急联系人
					item.isContact = this.detailInfo.isContact
					// 紧急联系人是否必填
					item.isContactMust = this.detailInfo.isContactMust
					// 是否显示选手区域地址
					item.isPalyerAddr = this.detailInfo.isPalyerAddr
					// 选手区域地址是否必填
					item.isPalyerAddrMust = this.detailInfo.isPalyerAddrMust
					// 是否显示选手收货地址
					item.isPostAddr = this.detailInfo.isPostAddr
					// 选手收货地址是否必填
					item.isPostAddrMust = this.detailInfo.isPostAddrMust
					res.eventChannel.emit('parentEvent', item)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 0 30rpx;
	position: relative;
}
.news {
	position: relative;
	width: calc(100% - 56rpx);
	background-color: #fff;
	padding: 18rpx 28rpx 24rpx;
	margin-bottom: 20rpx;
	&-wrap {
		width: calc(100% - 40rpx);
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx 20rpx;
	}
	&-img {
		width: 694rpx;
		height: 264rpx;
		border-radius: 8rpx;
	}
	&-right {
		width: 95%;
		display: flex;
		align-items: center;
		margin: 12rpx auto 0;
	}
}
.address {
	padding: 24rpx 32rpx;
	width: calc(702rpx - 64rpx);
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
}
.tips {
	background-color: #d4f0ff;
	font-size: 26rpx;
	color: #0071c5;
	padding: 18rpx 22rpx;
	line-height: 36rpx;
	margin: 12rpx 0 10rpx;
}

::v-deep {
	.u-cell .u-cell__body {
		padding: 4rpx 14rpx;
		.u-cell__title-text {
			font-size: 28rpx;
			color: #898989;
		}
		.u-cell__value {
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
		}
	}
	.u-button {
		margin: 0;
	}
}
</style>
